<template>
	<view class="drawer">
		<view class="top">
			<view class="box">
				<image class="head" :src="$urlPrefix+user.headImagePath" ></image>
			</view>
			<view class="name">
				{{user.name}}
			</view>
		</view>
		<view class="body">
			<uni-list>
				<uni-list-item title="我的订单" :clickable="true" to="/pages/order-list/order-list"></uni-list-item>
				<uni-list-item title="个人中心" :to="'/pages/user-info/user-info?id='+$getNowUser().id" :clickable="true"></uni-list-item>
			</uni-list>
		</view>
		<view class="exit" @click="exit">
			退出登录
		</view>
	</view>
</template>

<script>
	export default {
		name: "drawer",
		data() {
			return {
				user: {}
			};
		},
		created() {
			this.user = this.$getNowUser()
			//console.log(this.user);
		},
		methods:{
			exit(){
				this.$emit("exit")
			}
		}
	}
</script>

<style lang="less">
	@mainColor: #2fb6ff;

	page {
		height: 100%;
		width: 100%;
	}

	.drawer {
		height: 100%;
		width: 100%;
		position: relative;
		.top {
			height: 25%;
			width: 100%;
			background-color: @mainColor;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.name{
				color: #fff;
				margin-top: 20rpx;
				font-size: 38rpx;
				font-weight: bold;
			}
			.box {
				height: 200rpx;
				width: 200rpx;
				overflow: hidden;
				border-radius: 100rpx;
				//border: 2rpx red solid;

				.head {
					width: 100%;
					height: 100%;
				}
			}

		}
		.exit{
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			font-size: 30rpx;
			color: @mainColor;
		}
	}
</style>
